<template>
  <entity-view @submit="submit" ref="imageForm" :model="imageInfo" :rules="rules" class="custom-modal" :operator-type="operationContext.operatorType">
    <form-item label="法人/负责人手持证件照" prop="holdingCert">
      <a-upload list-type="picture-card"
                :show-upload-list="false"
                :data="{'isup':1}"
                :before-upload="beforeUpload"
                :customRequest="holdingCertUpload"
                :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
      >
        <div v-if="this.holdingCertUrl !== ''">
          <img :src="this.holdingCertUrl" width="100px" height="100px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>查看大图</span>
            </template>
            <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewHoldingCert"/>
          </a-tooltip>
          <a-tooltip placement="bottom" v-if="this.operationContext.operatorType==='add'||this.operationContext.operatorType==='edit'">
            <template slot="title">
              <span>清除图片</span>
            </template>
            <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delHoldingCert" />
          </a-tooltip>
        </div>
        <div v-if="this.holdingCertUrl === ''" :disabled="true">
          <a-icon :type="'plus'"/>
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
    </form-item>
    <form-item label="商户门头照" prop="shopFront">
      <a-upload list-type="picture-card"
                :show-upload-list="false"
                :data="{'isup':1}"
                :before-upload="beforeUpload"
                :customRequest="shopFrontUpload"
                :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
      >
        <div v-if="this.shopFrontUrl !== ''">
          <img :src="this.shopFrontUrl" width="100px" height="100px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>查看大图</span>
            </template>
            <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewShopFront"/>
          </a-tooltip>
          <a-tooltip placement="bottom" v-if="this.operationContext.operatorType==='add'||this.operationContext.operatorType==='edit'">
            <template slot="title">
              <span>清除图片</span>
            </template>
            <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delShopFront" />
          </a-tooltip>
        </div>
        <div v-if="this.shopFrontUrl === ''">
          <a-icon :type="'plus'"/>
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
    </form-item>
    <form-item label="经营场所照" prop="premisesList">
      <div v-for="(item,index) in this.premisesList" v-if="item.recordStatus==='Y'" class="ant-upload-picture-card-wrapper">
        <img :src="item.imageData" width="100px" height="100px">
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>查看大图</span>
          </template>
          <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewListImg('premises',index)"/>
        </a-tooltip>
        <a-tooltip placement="bottom" v-if="item.optFlag==='add'||item.optFlag==='upd'">
          <template slot="title">
            <span>清除图片</span>
          </template>
          <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delListImg('premises',index)" />
        </a-tooltip>
      </div>
      <a-upload
        list-type="picture-card"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :customRequest="premisesUpload"
        v-if="typeof this.premisesList === 'undefined' || this.premisesList.length < 8"
        :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
      >
        <a-icon :type="'plus'"/>
        <div class="ant-upload-text">上传</div>
      </a-upload>
    </form-item>
    <form-item label="收银台照片" prop="cashier">
      <a-upload list-type="picture-card"
                :show-upload-list="false"
                :data="{'isup':1}"
                :before-upload="beforeUpload"
                :customRequest="cashierUpload"
                :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
      >
        <div v-if="this.cashierUrl !== ''">
          <img :src="this.cashierUrl" width="100px" height="100px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>查看大图</span>
            </template>
            <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewCashier"/>
          </a-tooltip>
          <a-tooltip placement="bottom" v-if="this.operationContext.operatorType==='add'||this.operationContext.operatorType==='edit'">
            <template slot="title">
              <span>清除图片</span>
            </template>
            <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delCashier"/>
          </a-tooltip>
        </div>
        <div v-if="this.cashierUrl === ''">
          <a-icon :type="'plus'"/>
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
    </form-item>
    <form-item label="签约协议照" prop="signitAuthList">
      <div v-for="(item,index) in this.signitAuthList" v-if="item.recordStatus==='Y'" class="ant-upload-picture-card-wrapper">
        <img :src="item.imageData" width="100px" height="100px">
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>查看大图</span>
          </template>
          <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewListImg('signitAuth',index)"/>
        </a-tooltip>
        <a-tooltip placement="bottom" v-if="item.optFlag==='add'||item.optFlag==='upd'">
          <template slot="title">
            <span>清除图片</span>
          </template>
          <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delListImg('signitAuth',index)" />
        </a-tooltip>
      </div>
      <a-upload
        list-type="picture-card"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :customRequest="signitAuthUpload"
        v-if="typeof this.signitAuthList === 'undefined' || this.signitAuthList.length < 8"
        :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
      >
        <a-icon :type="'plus'"/>
        <div class="ant-upload-text">上传</div>
      </a-upload>
    </form-item>
    <form-item label="人行征信查询授权书" prop="creditAuthList">
      <div v-for="(item,index) in this.creditAuthList" v-if="item.recordStatus==='Y'" class="ant-upload-picture-card-wrapper">
        <img :src="item.imageData" width="100px" height="100px">
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>查看大图</span>
          </template>
          <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewListImg('creditAuth',index)"/>
        </a-tooltip>
        <a-tooltip placement="bottom" v-if="item.optFlag==='add'||item.optFlag==='upd'">
          <template slot="title">
            <span>清除图片</span>
          </template>
          <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delListImg('creditAuth',index)" />
        </a-tooltip>
      </div>
      <a-upload
        list-type="picture-card"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :customRequest="creditAuthUpload"
        :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
        v-if="typeof this.creditAuthList === 'undefined' || this.creditAuthList.length < 8"
      >
        <a-icon :type="'plus'"/>
        <div class="ant-upload-text">上传</div>
      </a-upload>
    </form-item>
    <form-item label="征信报告" prop="creditReportList">
      <div v-for="(item,index) in this.creditReportList"  v-if="item.recordStatus==='Y'" class="ant-upload-picture-card-wrapper">
        <img :src="item.imageData" width="100px" height="100px">
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>查看大图</span>
          </template>
          <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewListImg('creditReport',index)"/>
        </a-tooltip>
        <a-tooltip placement="bottom" v-if="item.optFlag==='add'||item.optFlag==='upd'">
          <template slot="title">
            <span>清除图片</span>
          </template>
          <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delListImg('creditReport',index)" />
        </a-tooltip>
      </div>
      <a-upload
        list-type="picture-card"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :customRequest="creditReportUpload"
        :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
        v-if="typeof this.creditReportList === 'undefined' || this.creditReportList.length < 8"
      >
        <a-icon :type="'plus'"/>
        <div class="ant-upload-text">上传</div>
      </a-upload>
    </form-item>
    <form-item label="身份证联网核查报告" prop="networkVerifyList">
      <div v-for="(item,index) in this.networkVerifyList" v-if="item.recordStatus==='Y'"  class="ant-upload-picture-card-wrapper">
        <img :src="item.imageData" width="100px" height="100px">
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>查看大图</span>
          </template>
          <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewListImg('networkVerify',index)"/>
        </a-tooltip>
        <a-tooltip placement="bottom" v-if="item.optFlag==='add'||item.optFlag==='upd'">
          <template slot="title">
            <span>清除图片</span>
          </template>
          <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delListImg('networkVerify',index)" />
        </a-tooltip>
      </div>
      <a-upload
        list-type="picture-card"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :customRequest="networkVerifyUpload"
        :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
        v-if="typeof this.networkVerifyList === 'undefined' || this.networkVerifyList.length < 8"
      >
        <a-icon :type="'plus'"/>
        <div class="ant-upload-text">上传</div>
      </a-upload>
    </form-item>
    <!-- TODO: 有未知判断条件 -->
    <form-item label="其他电子资料文件" prop="otherFileList">
      <div v-for="(item,index) in this.otherFileList" v-if="item.recordStatus==='Y'" class="ant-upload-picture-card-wrapper">
        <img :src="item.imageData" width="100px" height="100px">
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>查看大图</span>
          </template>
          <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewListImg('otherFile',index)"/>
        </a-tooltip>
        <a-tooltip placement="bottom" v-if="item.optFlag==='add'||item.optFlag==='upd'">
          <template slot="title">
            <span>清除图片</span>
          </template>
          <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delListImg('otherFile',index)" />
        </a-tooltip>
      </div>
      <a-upload
        list-type="picture-card"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :customRequest="otherFileUpload"
        :disabled="this.operationContext.operatorType!=='add'&&this.operationContext.operatorType!=='edit'"
        v-if="typeof this.otherFileList === 'undefined' || this.otherFileList.length < 8"
      >
        <a-icon :type="'plus'"/>
        <div class="ant-upload-text">上传</div>
      </a-upload>
    </form-item>


    <form-item label="商户签约协议号" prop="mchntSignId" v-model="imageInfo.mchntSignId"></form-item>

    <form-item label="停用原因" prop="mchntStopReason" v-model="imageInfo.mchntStopReason" :valid="this.operationContext.operatorType === 'stop'"  v-if="(this.operationContext.operatorType === 'chkView' ||this.operationContext.operatorType === 'chk' ||this.operationContext.operatorType === 'stop' || this.operationContext.operatorType === 'view')&&this.flag==='N'" input-type="select" :options="[
      {value: '1', name: '黑名单商户'},
      {value: '2', name: '3个月无交易'},
      {value: '3', name: '12个月无交易'},
      {value: '4', name: '经营异常'},
      {value: '5', name: '涉嫌电信诈骗'},
      {value: '6', name: '其它'},
      {value: '7', name: '证件到期'},
    ]"></form-item>
    <form-item label="注销原因" prop="mchntCancelReason" v-model="imageInfo.mchntCancelReason" :disabled="this.operationContext.operatorType !== 'cancel'" input-type="textarea" v-if="(this.operationContext.operatorType === 'chkView' ||this.operationContext.operatorType === 'chk' ||this.operationContext.operatorType === 'cancel' || this.operationContext.operatorType === 'view')&&this.flag==='N'"></form-item>

    <form-item label="审核拒绝原因" prop="auditRefuseReason" v-model="imageInfo.auditRefuseReason" input-type="textarea" v-if="(this.operationContext.operatorType === 'chkView' ||this.operationContext.operatorType === 'chk'||this.operationContext.operatorType === 'view')&&this.flag==='N'"></form-item>

    <div class="btn-wrapper">
      <a-button type="primary" @click="previous">上一步</a-button>
      <a-button type="primary" @click="submit()" v-if="(this.operationContext.operatorType !== 'chk'&&this.operationContext.operatorType !== 'chkView') && this.flag === 'N'">提交审批</a-button>
      <a-button type="primary" @click="submit('pass')" v-if="this.operationContext.operatorType === 'chk' && this.flag === 'N'">审批通过</a-button>
      <a-button type="primary" @click="submit('back')" v-if="this.operationContext.operatorType === 'chk' && this.flag === 'N'">审批拒绝</a-button>
      <a-button type="primary" @click="zip" v-if="this.operationContext.operatorType !== 'add'&&this.operationContext.operatorType !== 'edit'" >下载商户图片</a-button>
      <a-button type="primary" @click="submit('')" v-if="this.flag !== 'N'">下一步</a-button>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="this.imageUrl" />
    </a-modal>
  </entity-view>
</template>

<script>
import EntityView from '../../../../components/common/entityView/EntityView'
import FormItem from '../../../../components/common/entityView/FormItem'
export default {
  name: 'ImageInfoForm',
  components: {EntityView, FormItem},
  inject: ['merchantBaseInfoContext', 'operationContext'],
  data: function () {
    return {
      pageInfo: {},
      rules: {
        mchntStopReason: [{required: false, message: '必选', trigger: 'blur'}],
        mchntCancelReason: [{required: false, message: '必填', trigger: 'blur'}],
        auditRefuseReason: [{required: false, message: '审批拒绝必填', trigger: 'blur'}],
      },
      previewVisible: false,
      imageUrl: "",
      holdingCertUrl: "",
      shopFrontUrl: "",
      cashierUrl: "",
      flag: "",//N(连锁商户门店，不独立清算)
      imageInfo:{},
      premisesList:[],
      signitAuthList:[],
      creditAuthList:[],
      creditReportList:[],
      networkVerifyList:[],
      otherFileList:[],
      optFlag:""
    }
  },
  mounted () {
    this.getPageInfo()
  },
  methods: {
    async getPageInfo () {
      try {
        let optFlag = {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`, chk: `chk`}[this.operationContext.operatorType]
        this.loading = true;
        const param = {
          optFlag: optFlag,
          instId: this.merchantBaseInfoContext.query.instId,
          mchntNo: this.operationContext.beanInfo.mchntNo
        }
        const res = await this.$get('/admin/mcmp/bMchntBaseInfo/editMchntImage',param);
        this.loading = false;
        this.imageUrl = "";
        this.holdingCertUrl = "";
        this.shopFrontUrl = "";
        this.cashierUrl = "";
        this.imageInfo = res.data.entity
        this.imageInfo.mchntNo = this.operationContext.beanInfo.mchntNo
        this.pageInfo = res.data
        this.flag = res.data.flag
        this.operationContext.flag = res.data.flag
        if(typeof this.imageInfo.holdingCert !== 'undefined'){
          this.getHoldingCert(this.imageInfo.holdingCert.imageLocalPath,this.imageInfo.holdingCert.id)
        }
        if(typeof this.imageInfo.shopFront !== 'undefined'){
          this.getShopFront(this.imageInfo.shopFront.imageLocalPath,this.imageInfo.shopFront.id)
        }
        if(typeof this.imageInfo.cashier !== 'undefined'){
          this.getCashier(this.imageInfo.cashier.imageLocalPath,this.imageInfo.cashier.id)
        }
        if(typeof this.imageInfo.premisesList !== 'undefined'){
          this.imageInfo.premisesList.forEach((item,index)=>{
            this.getListImg(item.imageLocalPath,item.id,index,'premises')
          })
          this.premisesList = this.imageInfo.premisesList
        }else{
          this.premisesList = []
        }
        if(typeof this.imageInfo.signitAuthList !== 'undefined'){
          this.imageInfo.signitAuthList.forEach((item,index)=>{
            this.getListImg(item.imageLocalPath,item.id,index,'signitAuth')
          })
          this.signitAuthList = this.imageInfo.signitAuthList
        }else{
          this.signitAuthList = []
        }
        if(typeof this.imageInfo.creditAuthList !== 'undefined'){
          this.imageInfo.creditAuthList.forEach((item,index)=>{
            this.getListImg(item.imageLocalPath,item.id,index,'creditAuth')
          })
          this.creditAuthList = this.imageInfo.creditAuthList
        }else{
          this.creditAuthList = []
        }
        if(typeof this.imageInfo.creditReportList !== 'undefined'){
          this.imageInfo.creditReportList.forEach((item,index)=>{
            this.getListImg(item.imageLocalPath,item.id,index,'creditReport')
          })
          this.creditReportList = this.imageInfo.creditReportList
        }else{
          this.creditReportList = []
        }
        if(typeof this.imageInfo.networkVerifyList !== 'undefined'){
          this.imageInfo.networkVerifyList.forEach((item,index)=>{
            this.getListImg(item.imageLocalPath,item.id,index,'networkVerify')
          })
          this.networkVerifyList = this.imageInfo.networkVerifyList
        }else{
          this.networkVerifyList = []
        }
        if(typeof this.imageInfo.otherFileList !== 'undefined'){
          this.imageInfo.otherFileList.forEach((item,index)=>{
            this.getListImg(item.imageLocalPath,item.id,index,'otherFile')
          })
          this.otherFileList = this.imageInfo.otherFileList
        }else{
          this.otherFileList = []
        }
      } catch (e) {
        console.error(e)
        this.loading = false;
      }
    },
    async submit (e) {
      try {
        if(this.operationContext.operatorType !== 'view'){
          const res = await this.$refs.imageForm.validate()
          if (res) {
            const params = Object.assign({
              instId: this.merchantBaseInfoContext.query.instId,
              mchntNo: this.operationContext.beanInfo.mchntNo,
              flag: this.flag
            }, this.imageInfo)
            params.optFlag = {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`}[this.operationContext.operatorType]
            params.premisesList = this.premisesList;
            params.premisesList.forEach(function (e) {
              e.imageData = '';
            });
            params.signitAuthList = this.signitAuthList;
            params.signitAuthList.forEach(function (e) {
              e.imageData = '';
            });
            params.creditAuthList = this.creditAuthList;
            params.creditAuthList.forEach(function (e) {
              e.imageData = '';
            });
            params.creditReportList = this.creditReportList;
            params.creditReportList.forEach(function (e) {
              e.imageData = '';
            });
            params.networkVerifyList = this.networkVerifyList;
            params.networkVerifyList.forEach(function (e) {
              e.imageData = '';
            });
            params.otherFileList = this.otherFileList;
            params.otherFileList.forEach(function (e) {
              e.imageData = '';
            });
            const res = await this.$post('/admin/mcmp/bMchntBaseInfo/editMchntImage', params)
            if (res.data.code === "100000") {
              this.$message.success('保存成功！')
              if(this.flag === "N"){
                if(e===undefined){
                  this.optFlag=params.optFlag;
                }else{
                  this.optFlag=e;
                }
                this.mchntType();
              }else{
                this.$emit("submit",e);
                return true
              }
            } else {
              this.$message.error(res.data.message)
              return false
            }
          }
        } else {
          this.$emit('submit', ...arguments)
        }
      } catch (e) {
        console.error(e)
      }
    },

    resetFields () {
      return this.$refs.form.resetFields()
    },

    previous () {
      this.operationContext.tabActiveKey = 'signInfo';
    },

    async zip(){
      const params = {
        mchntNo:this.operationContext.beanInfo.mchntNo,
        instId:this.merchantBaseInfoContext.query.instId,
        optFlag:"view",
        type:"1",
      }
      const res = await this.$download('/admin/mcmp/bMchntImageInfo/zip', params,"商户图片.zip")
    },

    async holdingCertUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.imageInfo.holdingCert = {
          imageLocalPath:res.data.data.imageLocalPath,
          recordStatus:"Y",
          imageIndex:0,
        }
        this.holdingCertUrl = res.data.data.imageData;
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async shopFrontUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.imageInfo.shopFront = {
          imageLocalPath:res.data.data.imageLocalPath,
          recordStatus:"Y",
          imageIndex:0,
        }
        this.shopFrontUrl = res.data.data.imageData;
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async cashierUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.imageInfo.cashier = {
          recordStatus:"Y",
          imageIndex:0,
          imageLocalPath:res.data.data.imageLocalPath,
        }
        this.cashierUrl = res.data.data.imageData;
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    viewHoldingCert(e) {
      this.imageUrl = this.holdingCertUrl;
      this.previewVisible = true;
      e.stopPropagation();
    },

    viewShopFront(e) {
      this.imageUrl = this.shopFrontUrl;
      this.previewVisible = true;
      e.stopPropagation();
    },

    viewCashier(e) {
      this.imageUrl = this.cashierUrl;
      this.previewVisible = true;
      e.stopPropagation();
    },

    delHoldingCert(e) {
      this.holdingCertUrl = "";
      if (this.imageInfo.holdingCert.id !== undefined && this.imageInfo.holdingCert.id !== '') {
        this.imageInfo.holdingCert.recordStatus = 'N';
      } else {
        this.imageInfo.holdingCert = {};
      }
      e.stopPropagation();
    },

    delShopFront(e) {
      this.shopFrontUrl = "";
      if (this.imageInfo.shopFront.id !== undefined && this.imageInfo.shopFront.id !== '') {
        this.imageInfo.shopFront.recordStatus = 'N';
      } else {
        this.imageInfo.shopFront = {}
      }
      e.stopPropagation();
    },

    delCashier(e) {
      this.cashierUrl = "";
      if (this.imageInfo.cashier.id !== undefined && this.imageInfo.cashier.id !== '') {
        this.imageInfo.cashier.recordStatus = 'N';
      } else {
        this.imageInfo.cashier = {};
      }
      e.stopPropagation();
    },

    async getHoldingCert(imageLocalPath,id){
      const params = {
        imageLocalPath: imageLocalPath,
        imgId: id,
        imageType: "00",
        instId: this.merchantBaseInfoContext.query.instId,
      };
      const res = await this.$get(
        "/admin/mcmp/bMchntImageInfo/getBompImg",params
      );
      if (res.data.code === "100000") {
        this.holdingCertUrl = res.data.data.imageData;
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async getShopFront(imageLocalPath,id){
      const params = {
        imageLocalPath: imageLocalPath,
        imgId: id,
        imageType: "00",
        instId: this.merchantBaseInfoContext.query.instId,
      };
      const res = await this.$get(
        "/admin/mcmp/bMchntImageInfo/getBompImg",params
      );
      if (res.data.code === "100000") {
        this.shopFrontUrl = res.data.data.imageData;
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async getCashier(imageLocalPath,id){
      const params = {
        imageLocalPath: imageLocalPath,
        imgId: id,
        imageType: "00",
        instId: this.merchantBaseInfoContext.query.instId,
      };
      const res = await this.$get(
        "/admin/mcmp/bMchntImageInfo/getBompImg",params
      );
      if (res.data.code === "100000") {
        this.cashierUrl = res.data.data.imageData;
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async getListImg(imageLocalPath,id,index,image){
      let imageType = '00'
      if(image === 'creditReport'){
        imageType = '01'
      }else if(image === 'otherFile'){
        imageType = '99'
      }
      const params = {
        imageLocalPath: imageLocalPath,
        imgId: id,
        imageType: '00',
        instId: this.merchantBaseInfoContext.query.instId,
      };
      const res = await this.$get(
        "/admin/mcmp/bMchntImageInfo/getBompImg",params
      );
      if (res.data.code === "100000") {
        if(image === 'premises'){
          this.imageInfo.premisesList[index].imageData = res.data.data.imageData;
        }
        if(image === 'signitAuth'){
          this.imageInfo.signitAuthList[index].imageData = res.data.data.imageData;
        }
        if(image === 'creditAuth'){
          this.imageInfo.creditAuthList[index].imageData = res.data.data.imageData;
        }
        if(image === 'creditReport'){
          this.imageInfo.creditReportList[index].imageData = res.data.data.imageData;
        }
        if(image === 'networkVerify'){
          this.imageInfo.networkVerifyList[index].imageData = res.data.data.imageData;
        }
        if(image === 'otherFile'){
          this.imageInfo.otherFileList[index].imageData = res.data.data.imageData;
        }
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/bmp'
      if (!isJPG) {
        this.$message.error('请上传图片文件');
      }
      return isJPG;
    },

    handleCancel() {
      this.previewVisible = false;
    },


    async premisesUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.premisesList.push({
          imageData:res.data.data.imageData,
          imageLocalPath:res.data.data.imageLocalPath,
          optFlag:this.imageInfo.optFlag,
          imageIndex:this.genImageIndex(this.premisesList),
          recordStatus:"Y",
        });
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async signitAuthUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp", formData
      );
      if (res.data.code === "100000") {
        this.signitAuthList.push({
          imageData: res.data.data.imageData,
          imageLocalPath: res.data.data.imageLocalPath,
          recordStatus: "Y",
          optFlag:this.imageInfo.optFlag,
          imageIndex: this.genImageIndex(this.signitAuthList),
        });
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async creditAuthUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.creditAuthList.push({
          imageData:res.data.data.imageData,
          imageLocalPath:res.data.data.imageLocalPath,
          optFlag:this.imageInfo.optFlag,
          recordStatus:"Y",
          imageIndex:this.genImageIndex(this.creditAuthList),
        });
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async creditReportUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "01");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp", formData
      );
      if (res.data.code === "100000") {
        this.creditReportList.push({
          imageData: res.data.data.imageData,
          imageLocalPath: res.data.data.imageLocalPath,
          optFlag:this.imageInfo.optFlag,
          recordStatus: "Y",
          imageIndex: this.genImageIndex(this.creditReportList),
        });
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async networkVerifyUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.networkVerifyList.push({
          imageData:res.data.data.imageData,
          imageLocalPath:res.data.data.imageLocalPath,
          optFlag:this.imageInfo.optFlag,
          recordStatus:"Y",
          imageIndex:this.genImageIndex(this.networkVerifyList),
        });
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    async otherFileUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "99");
      formData.append('instId', this.merchantBaseInfoContext.query.instId);
      formData.append('mchntNo', this.operationContext.beanInfo.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.otherFileList.push({
          imageData:res.data.data.imageData,
          imageLocalPath:res.data.data.imageLocalPath,
          optFlag:this.imageInfo.optFlag,
          recordStatus:"Y",
          imageIndex:this.genImageIndex(this.otherFileList),
        });
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    //查看图片详情
    async viewListImg(str, index) {
      if (str === 'premises') {
        this.imageUrl = this.premisesList[index].imageData;
      }
      if (str === 'signitAuth') {
        this.imageUrl = this.signitAuthList[index].imageData;
      }
      if (str === 'creditAuth') {
        this.imageUrl = this.creditAuthList[index].imageData;
      }
      if (str === 'creditReport') {
        this.imageUrl = this.creditReportList[index].imageData;
      }
      if (str === 'networkVerify') {
        this.imageUrl = this.networkVerifyList[index].imageData;
      }
      if (str === 'otherFile') {
        this.imageUrl = this.otherFileList[index].imageData;
      }
      this.previewVisible = true;
    },


    /**
     * 删除图片
     * 判断如果有图片id将recordStatus改为N
     * 没有图片id直接再list移除图片
     * */
    async delListImg(str, index) {
      //经验场所照
      if (str === 'premises') {
        const info = this.premisesList[index]
        if (info.id !== undefined && info.id !== '') {
          this.premisesList[index].recordStatus = 'N';
        } else {
          this.premisesList.splice(index, 1)
        }

      }
      //签约协议照
      if (str === 'signitAuth') {
        const info = this.signitAuthList[index]
        if (info.id !== undefined && info.id !== '') {
          this.signitAuthList[index].recordStatus = 'N'
        } else {
          this.signitAuthList.splice(index, 1)
        }
      }
      //人行征信查询授权书
      if (str === 'creditAuth') {
        const info = this.creditAuthList[index]
        if (info.id !== undefined && info.id !== '') {
          this.creditAuthList[index].recordStatus = 'N'
        } else {
          this.creditAuthList.splice(index, 1)
        }
      }
      //征信报告
      if (str === 'creditReport') {
        const info = this.creditReportList[index]
        if (info.id !== undefined && info.id !== '') {
          this.creditReportList[index].recordStatus = 'N';
        } else {
          this.creditReportList.splice(index, 1)
        }
      }
      //身份证联网核查报告
      if (str === 'networkVerify') {
        const info = this.networkVerifyList[index]
        if (info.id !== undefined && info.id !== '') {
          this.networkVerifyList[index].recordStatus = 'N';
        } else {
          this.networkVerifyList.splice(index, 1)
        }
      }
      //其他电子资料文件
      if (str === 'otherFile') {
        const info = this.otherFileList[index]
        if (info.id !== undefined && info.id !== '') {
          this.otherFileList[index].recordStatus = 'N';
        } else {
          this.otherFileList.splice(index, 1)
        }
      }
    },
    /*提交审批*/
    async mchntType(){
      let optFlag = {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`}[this.operationContext.operatorType]
      const res = await this.$post('/admin/mcmp/bMchntBaseInfo/mchntType', {
        instId : this.merchantBaseInfoContext.query.instId,
        optFlag : this.optFlag,
        mchntNo : this.operationContext.beanInfo.mchntNo,
        refuseReason : this.imageInfo.auditRefuseReason
      })
      if(res.data.code === '100000' || res.data.code === '111111' ){
        this.$emit("submit");
      }else{
        this.$message.error('提交审批失败')
      }
    },


    genImageIndex(list) {
      var imgIndexArr = [];
      for (var i = 0; i < list.length; i++) {
        if (list[i].imageIndex != "undefined") {
          var imageIndex = parseInt(list[i].imageIndex);
          imgIndexArr.push(imageIndex);
        }
      }
      //影像序号最多两位数字
      for (var i = 0; i < 100; i++) {
        var seq = 0;
        for (var j = 0; j < imgIndexArr.length; j++) {
          if (i == imgIndexArr[j]) {
            seq = 1;
          }
        }
        if (seq == 0) {
          return i;
        }
      }
      return 1;
    }
  }
}
</script>

<style scoped>
.btn-wrapper{
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;
}
</style>
<style>
.custom-modal .ant-calendar-picker{
    width: 100%;
}
.ant-upload-picture-card-wrapper{
  width: 50%;
  float: left;
}
</style>
